import React, { createContext, useContext } from 'react'

const AppContext = createContext()

class CreateContext extends React.Component {
  render() {
    return (
      <AppContext.Provider value={'再见'}>
        <Head />
      </AppContext.Provider>
    )
  }
}

class Head extends React.Component {
  render() {
    return (
      <>
        <Title />
        <Body />
        <Foo />
      </>
    )
  }
}
class Body extends React.Component {
  static contextType = AppContext
  render() {
    let value = this.context
    return <div>{value}</div>
  }
}

const Foo = () => {
  var value = useContext(AppContext)
  return <div>{value}</div>
}

class Title extends React.Component {
  render() {
    return <AppContext.Consumer>{(value) => <h2>{value}</h2>}</AppContext.Consumer>
  }
}

export default CreateContext
